<!--
 * @Author: 45F
 * @LastEditors: qing
 * @Description: 登录页
 * @Date: 2019-07-19 13:48:38
 * @LastEditTime: 2019-10-22 11:10:36
 -->
<template>
  <div class="login-box login-container">
    <div class="login-box-inner">
      <div class="logo">
        <img src="../../assets/images/styleChange/login-header.png" />
      </div>
      <div class="login-title">用户登录</div>
      <a-form :form="editForm" @submit="handleSubmit">
        <a-form-item>
          <a-input
            size="large"
            v-decorator="[
              'username',
              { rules: [{ required: true, message: '请输入用户名!' }] }
            ]"
            placeholder="用户名"
            ><a-icon
              slot="prefix"
              type="user"
              style="color: #0177E4;font-size: 20px;"
          /></a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            size="large"
            v-decorator="[
              'password',
              { rules: [{ required: true, message: '请输入密码!' }] }
            ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: #0177E4;font-size: 20px;"
          /></a-input>
        </a-form-item>
        <!-- <a-form-item v-if="isServerShow">
          <a-input size="large" v-decorator="['server', {rules: [{ required: true, message: '请输入服务器IP:端口!' }]}]" placeholder="服务器IP:端口"></a-input>
        </a-form-item> -->
        <a-form-item>
          <a-button
            size="large"
            type="primary"
            html-type="submit"
            block
            :loading="loading"
            class="login-btn"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { auth } from "@/api";
import { setToken, setUser } from "@/libs/util";

export default {
  data() {
    return {
      editForm: this.$form.createForm(this),
      loading: false
      // isServerShow: true
    };
  },
  // mounted () {
  //   window.vue = this // 在浏览器console中调用vue内部方法,如：vue.serverShow(true)会显示服务器录入表单,vue.serverShow(false)隐藏
  // },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      var currentPort = location.port;
      this.editForm.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true;
          auth
            .postCommonLogin(values)
            .then(res => {
              if (res.data.code === -1) {
                this.$message.warning(res.data.message);
              }
              setToken(res.data.data.token, currentPort);
              // let userType = 1;
              let userType = res.data.data.userType;
              setUser({ userType: userType });
              if (userType === 1) // 1是管理员权限
                this.$router.push({
                  name: "data_exchange"
                });
              else {
                this.$router.push({
                  name: "data_exchange_zcmx"
                });
              }
              // this.setUserInfo();
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    setUserInfo() {
      auth
        .getCommonCurrentUser()
        .then(res => {
          this.loading = false;
          setUser(res.data);
          this.$router.push({
            name: "data_exchange"
          });
        })
        .catch(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scope lang="less">
@import "index.less";
</style>
<style lang="less" scoped>
.login-btn {
  width: 100%;
}
</style>
